<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<!-- <script type="text/javascript">
		
			$(function(){
				//1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数
				$(":text").focus(function(){
					//2. 当获取焦点时, 若 #address 中是默认值
					//(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 ""
					var val = $(this).val();
					
					if(val == this.defaultValue){
						$(this).val("");
					}
				}).blur(function(){
					//3. 失去焦点是, 若 #address 的值在去除前后空格后等于 ""
					//则为其恢复默认值. 
					var val = this.value;	
					if($.trim(val) == ""){
						this.value = this.defaultValue;
					}
				});
				
				//2. 
				$(":button:eq(1)").click(function(){
					$("#single").val("选择3号");
				});
				
				$(":button:eq(2)").click(function(){
					$("#multiple").val(["选择2号", "选择4号"]);				
				});
								
				$(":button:eq(3)").click(function(){
					$(":checkbox[name='c']").val(["check2", "check4"]);
				});
				
				$(":button:eq(4)").click(function(){
					//即便是为一组 radio 赋值, val 参数中也应该使用数组. 
					//使用一个值不起作用。 
					$(":radio[name='r']").val(["radio2"]);
				});
				
				$(":button:eq(5)").click(function(){
					//val() 可以直接获取 select 的被选择的值. 
					alert($("#single").val());
					alert($("#multiple").val());
					
					//val 不能直接获取 checkbox 被选择的值
					//若直接获取, 只能得到第一个被选择的值. 
					//因为 $(":checkbox[name='c']:checked") 得到的是一个
					//数组. 而使用 val() 方法只能获取数组元素的第一个值
					//若希望打印被选择的所有制, 需要使用 each 遍历. 
					//alert($(":checkbox[name='c']:checked").val());
					$(":checkbox[name='c']:checked").each(function(){
						alert(this.value);
					});
					
					//而 raido 被选择的只有一个, 所以可以直接使用 val() 方法. 
					alert($(":radio[name='r']:checked").val());
				});
				
			})
		
		</script> -->

<script type="text/javascript">
	$(function() {
		//聚集焦点 focus  失去焦点 blur
		$(":text").focus(function() {
			var text = $(this).val();
			if (text == this.defaultValue) {
				$(this).val("");
			}
		}).blur(function() {
			var text = $(this).val();
			if ($.trim(text) == "") {
				$(this).val(this.defaultValue);
			}
		});

		//<input type="button" value="使单选下拉框的'选择3号'被选中" />
		$(":button:eq(1)").click(function() {
			//选择下拉框
			$("#single").val("选择3号");
		});
		//<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中" />
		$(":button:eq(2)").click(function() {
			//选择下拉框
			$("#multiple").val([ "选择2号", "选择4号" ]);
		});
		//<input type="button" value="使多选框的'多选2'和'多选4'被选中" />
		$(":button:eq(3)").click(function() {
			$(":checkbox[name='c']").val([ "check2", "check4" ]);
		});
		//<input type="button" value="使单选框的'单选2'被选中" />
		$(":button:eq(4)").click(function() {
			//选择下拉框
			//为radio赋值是  要使用数组进行赋值
			$(":radio[name = 'r']").val([ "radio2" ]);
		});
		//<input type="button" value="打印已经被选中的值">
		$(":button:eq(5)").click(function() {
			//打印单选下拉框
			alert($("#single").val());
			alert($("#multiple").val());
			//val() 方法无法全部打印 checkbox 的值  只能打印第一个的值
			//:checked 选择器返回的为一个数组 所以只能打印数组的第一个
			alert($(":checkbox[name='c']:checked").val());
			//由于 radio 是单选  所以可以打印
			alert($(":radio[name='r']:checked").val());
		});
	});
</script>
</head>
<body>
	<input type="text" id="address" value="请输入邮箱地址">
	<br>
	<input type="text" id="password" value="请输入邮箱密码">
	<br>
	<input type="button" value="登录">

	<br>
	<br>
	<br>

	<input type="button" value="使单选下拉框的'选择3号'被选中" />
	<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中" />
	<br>
	<input type="button" value="使多选框的'多选2'和'多选4'被选中" />
	<input type="button" value="使单选框的'单选2'被选中" />
	<br>
	<input type="button" value="打印已经被选中的值">
	<br>

	<br />

	<select id="single">
		<option>选择1号</option>
		<option>选择2号</option>
		<option>选择3号</option>
	</select>

	<select id="multiple" multiple="multiple" style="height:120px;">
		<option selected="selected">选择1号</option>
		<option>选择2号</option>
		<option>选择3号</option>
		<option>选择4号</option>
		<option selected="selected">选择5号</option>
	</select>

	<br />
	<br />

	<input type="checkbox" name="c" value="check1" /> 多选1
	<input type="checkbox" name="c" value="check2" /> 多选2
	<input type="checkbox" name="c" value="check3" /> 多选3
	<input type="checkbox" name="c" value="check4" /> 多选4

	<br />

	<input type="radio" name="r" value="radio1" /> 单选1
	<input type="radio" name="r" value="radio2" /> 单选2
	<input type="radio" name="r" value="radio3" /> 单选3

</body>
</html>
